<template>
  <div class>
    <el-form ref="hadoopFileInput" :model="hadoopFileInput" label-width="190px" size="mini">
      <el-form-item label="步骤名称" prop="name">
        <el-input v-model="hadoopFileInput.name"/>
      </el-form-item>
      <el-tabs v-model="tabsValue" type="border-card">
        <el-tab-pane label="文件" name="file">
          <el-form-item label="文件或者目录" prop="name">
            <el-popover
              ref="fileListPopover"
              v-model="srcPopover"
              placement="bottom-start"
              trigger="click"
            >
              <u-file ref="filepro" @setFileData="setFileData" @hook:mounted="setChildSuffix"/>
            </el-popover>
            <el-input v-model="hadoopFileInput.files.file[0].name" v-popover:fileListPopover placeholder="点击选择文件" style="width:100%"/>
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="内容" name="content">
          <el-scrollbar :style="{ height: domHeight - 500 + 'px'}">
            <el-form-item label="文件类型" prop="type">
              <el-select
                v-model="hadoopFileInput.files.type"
                filterable
                placeholder="请选择"
                style="width:100%"
                @focus="getvalueFormats"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.prop"
                  :label="item.label"
                  :value="item.prop"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="分隔符" prop="separator">
              <el-input v-model="hadoopFileInput.separator"/>
            </el-form-item>
            <el-form-item label="文本限定符" prop="enclosure">
              <el-input v-model="hadoopFileInput.enclosure"/>
            </el-form-item>
            <el-form-item v-if="false" label="在文本限定符里允许换行?" prop="enclosure_breaks">
              <el-checkbox v-model="hadoopFileInput.enclosure_breaks" true-label="Y" false-label="N"/>
            </el-form-item>
            <el-form-item v-if="false" label="逃逸字符" prop="escapechar">
              <el-input v-model="hadoopFileInput.escapechar"/>
            </el-form-item>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="头部" prop="header">
                  <el-checkbox v-model="hadoopFileInput.header" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="头部行数量" prop="nr_headerlines">
                  <el-input v-model="hadoopFileInput.nr_headerlines"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="尾部" prop="footer">
                  <el-checkbox v-model="hadoopFileInput.footer" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="尾部行数量" prop="nr_footerlines">
                  <el-input v-model="hadoopFileInput.nr_footerlines"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="包装行?" prop="line_wrapped">
                  <el-checkbox v-model="hadoopFileInput.line_wrapped" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="以时间包装的行数" prop="nr_wraps">
                  <el-input v-model="hadoopFileInput.nr_wraps"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="分页布局(printout)?" prop="layout_paged">
                  <el-checkbox v-model="hadoopFileInput.layout_paged" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="每页记录行数" prop="nr_lines_per_page">
                  <el-input v-model="hadoopFileInput.nr_lines_per_page"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col v-if="false">
              <el-row>
                <el-form-item label="文档头部行" prop="nr_lines_doc_header">
                  <el-input v-model="hadoopFileInput.nr_lines_doc_header"/>
                </el-form-item>
              </el-row>
            </el-col>
            <el-form-item label="压缩" prop="compression">
              <el-select
                v-model="hadoopFileInput.files.compression"
                filterable
                placeholder="请选择"
                style="width:100%"
                @focus="getvalueFormats"
              >
                <el-option
                  v-for="item in formatOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="false" label="没有空行" prop="noempty">
              <el-checkbox v-model="hadoopFileInput.noempty" true-label="Y" false-label="N"/>
            </el-form-item>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="在输出包括字段名?" prop="include">
                  <el-checkbox v-model="hadoopFileInput.include" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="包含文件名的字段名" prop="include_field">
                  <el-input v-model="hadoopFileInput.include_field"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="false">
              <el-col :span="4">
                <el-form-item label="输出包含行数?" prop="rownum">
                  <el-checkbox v-model="hadoopFileInput.rownum" true-label="Y" false-label="N"/>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="行数字段名称" prop="rownum_field">
                  <el-input v-model="hadoopFileInput.rownum_field"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item v-if="false" label="按文件取行号" prop="rownumByFile">
              <el-checkbox v-model="hadoopFileInput.rownumByFile" true-label="Y" false-label="N"/>
            </el-form-item>
            <el-form-item label="格式" prop="format">
              <el-select
                v-model="hadoopFileInput.format"
                filterable
                placeholder="请选择"
                style="width:100%"
                @focus="getvalueFormats"
              >
                <el-option
                  v-for="item in formatOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="false" label="编码方式" prop="encoding">
              <el-select
                v-model="hadoopFileInput.encoding"
                filterable
                placeholder="请选择"
                style="width:100%"
                @focus="getvalueFormats"
              >
                <el-option
                  v-for="item in formatOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-if="false" label="记录数量限制" prop="limit">
              <el-input v-model="hadoopFileInput.limit"/>
            </el-form-item>
            <el-form-item v-if="false" label="解析日期时候是否严格要求?" prop="date_format_lenient">
              <el-checkbox v-model="hadoopFileInput.date_format_lenient" true-label="Y" false-label="N"/>
            </el-form-item>
            <el-form-item v-if="false" label="本地日期格式" prop="date_format_locale">
              <el-select
                v-model="hadoopFileInput.date_format_locale"
                filterable
                placeholder="请选择"
                style="width:100%"
                @focus="getvalueFormats"
              >
                <el-option
                  v-for="item in formatOptions"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="添加文件名" prop="add_to_result_filenames">
              <el-checkbox v-model="hadoopFileInput.add_to_result_filenames" true-label="Y" false-label="N"/>
            </el-form-item>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="字段" name="fields">
          <template>
            <u-table
              id="fields"
              ref="tableField"
              :table-data="hadoopFileInput.fields"
              :table-header="cloumns"
              @removeObj="removeObj"
              @getStreamFieldOptions="getStreamFieldOptions"
            />
            <el-col :span="24">
              <div class="el-table-add-row" style="width:100%" @click="addObj">
                <span>+ 添加</span>
              </div>
            </el-col>
          </template>
          <div class="divBut">
            <el-button type="primary" @click="getField">
              获取字段
            </el-button>
            <el-button v-if="false" type="primary">
              最小宽度
            </el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="错误处理" name="remove">
          <el-form-item label="忽略错误?" prop="error_ignored">
            <el-checkbox v-model="hadoopFileInput.error_ignored" true-label="Y" false-label="N" @change="error_ignored_change"/>
          </el-form-item>
          <el-form-item label="跳过错误行?" prop="error_line_skipped">
            <el-checkbox v-model="hadoopFileInput.error_line_skipped" true-label="Y" false-label="N" :disabled="errorDisabled"/>
          </el-form-item>
          <el-form-item label="错误计数字段" prop="error_count_field">
            <el-input v-model="hadoopFileInput.error_count_field" :disabled="errorDisabled"/>
          </el-form-item>
          <el-form-item label="错误字段文件名" prop="error_fields_field">
            <el-input v-model="hadoopFileInput.error_fields_field" :disabled="errorDisabled"/>
          </el-form-item>
          <el-form-item label="错误文本字段" prop="error_text_field">
            <el-input v-model="hadoopFileInput.error_text_field" :disabled="errorDisabled"/>
          </el-form-item>
          <el-row>
            <el-col style="width:50%">
              <el-form-item label="告警文件目录" prop="bad_line_files_destination_directory">
                <el-input v-model="hadoopFileInput.bad_line_files_destination_directory" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:30%">
              <el-form-item label="扩展名" prop="bad_line_files_extension">
                <el-input v-model="hadoopFileInput.bad_line_files_extension" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:20%">
              <el-button type="primary" style="margin-left:10px" size="mini" :disabled="errorDisabled">
                变量
              </el-button>
              <el-button type="primary" size="mini" :disabled="errorDisabled">
                浏览
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="width:50%">
              <el-form-item label="错误文件目录" prop="error_line_files_destination_directory">
                <el-input v-model="hadoopFileInput.error_line_files_destination_directory" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:30%">
              <el-form-item label="扩展名" prop="error_line_files_extension">
                <el-input v-model="hadoopFileInput.error_line_files_extension" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:20%">
              <el-button type="primary" style="margin-left:10px" size="mini" :disabled="errorDisabled">
                变量
              </el-button>
              <el-button type="primary" size="mini" :disabled="errorDisabled">
                浏览
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="width:50%">
              <el-form-item label="失败行数文件目录" prop="line_number_files_destination_directory">
                <el-input v-model="hadoopFileInput.line_number_files_destination_directory" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:30%">
              <el-form-item label="扩展名" prop="line_number_files_extension">
                <el-input v-model="hadoopFileInput.line_number_files_extension" :disabled="errorDisabled"/>
              </el-form-item>
            </el-col>
            <el-col style="width:20%">
              <el-button type="primary" style="margin-left:10px" size="mini" :disabled="errorDisabled">
                变量
              </el-button>
              <el-button type="primary" size="mini" :disabled="errorDisabled">
                浏览
              </el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="过滤" name="filter">
          <template>
            <el-table id="filters" ref="filterField" :data="hadoopFileInput.filters" border style="width: 100%;" size="mini" @getStreamFieldOptions="getStreamFilterOptions">
              <el-table-column label="操作" width="80" :resizable="false">
                <template slot-scope="scope">
                  <div class="optionStyle">
                    <el-button
                      type="text"
                      size="mini"
                      @click="removeFilter"
                    >
                      移除
                    </el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column property="filter_string" label="过滤字符串">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.filter_string" size="mini"/>
                </template>
              </el-table-column>
              <el-table-column property="filter_position" label="过滤器位置">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.filter_position" size="mini"/>
                </template>
              </el-table-column>
              <el-table-column property="filter_is_last_line" label="停止在过滤器">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.filter_is_last_line"
                    placeholder="请选择字段"
                    size="mini"
                  >
                    <el-option
                      v-for="column in filterColumns"
                      :key="column.label"
                      :prop="column.prop"
                      :label="column.label"
                      :value="column.prop"
                    />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column property="filter_is_positive" label="积极匹配">
                <template slot-scope="scope">
                  <el-select
                    v-model="scope.row.filter_is_positive"
                    placeholder="请选择字段"
                    size="mini"
                  >
                    <el-option
                      v-for="column in filterColumns"
                      :key="column.label"
                      :prop="column.prop"
                      :label="column.label"
                      :value="column.prop"
                    />
                  </el-select>
                </template>
              </el-table-column>
            </el-table>
            <el-col :span="24">
              <div class="el-table-add-row" style="width:100%" @click="addFilter">
                <span>+ 添加</span>
              </div>
            </el-col>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div class="el-dialog__footer">
      <span class="dialog-footer">
        <el-button v-if="false" type="success" icon="el-icon-view">预览</el-button>
        <el-button
          icon="el-icon-back"
          @click="cancel"
        >取消
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-check"
          @click="handleSaveData()"
        >确定
        </el-button>
      </span>
    </div>
  </div>
</template>
<script>
/* eslint semi: ["error", "always"] */
import API from '../../../../../api/index';
import TableFileds from '../../../table/table-fields.vue';
import filePopover from '../../../file/srcFiles.vue';
import mxgraph from '../../../../../graph/VueMxGraphLoader';
/* eslint-disable no-undef */
/* eslint-disable no-new-object */
/* eslint-disable no-new */
/* eslint-disable new-cap */
const { mxUtils, mxCodec } = mxgraph;
export default {
  name: 'HadoopFileInput',
  components: {
    'u-table': TableFileds,
    'u-file': filePopover
  },
  props: {
    name: String
  },
  data() {
    return {
      errorDisabled: true,
      graph: null,
      servlet_output: false,
      fileNameInField: false,
      fileNameField: true,
      SpecifyFormat: false,
      data_time_format: true,
      data_time_format2: false,
      srcPopover: false,
      hadoopFileInput: {
        name: '',
        files: {
          file: [{
            'name': '',
            'filemask': null,
            'exclude_filemask': null,
            'file_required': 'N',
            'include_subfolders': 'N',
            'id': '',
            'source_configuration_name': '' // hadoop的id
          }],
          type: 'CSV', // 文件类型
          compression: 'None' // 压缩
        },
        separator: ';', // 分隔符
        enclosure: '"', // 文本限定符
        enclosure_breaks: 'N', // 在文本限定符里允许换行?
        escapechar: '', // 逃逸字符
        header: 'Y', // 头部
        nr_headerlines: '1', // 头部行数量
        footer: 'N', // 尾部
        nr_footerlines: '1', // 尾部行数量
        line_wrapped: 'N', // 包装行
        nr_wraps: '1', // 以时间包装的行数
        layout_paged: 'N', // 分页布局
        nr_lines_per_page: '80', // 每页记录行数
        nr_lines_doc_header: '0', // 文档头部行
        noempty: 'Y', // 没有空行
        include: 'N', // 在输出包括字段名
        include_field: '',
        rownum: 'N',
        rownumByFile: 'N',
        rownum_field: '',
        format: 'DOS',
        encoding: '',
        limit: '0',
        date_format_lenient: 'Y',
        date_format_locale: 'zh_CN',
        add_to_result_filenames: 'Y',
        error_ignored: 'N',
        error_line_skipped: 'N',
        error_count_field: '',
        error_fields_field: '',
        error_text_field: '',
        bad_line_files_destination_directory: '',
        bad_line_files_extension: 'warning',
        error_line_files_destination_directory: '',
        error_line_files_extension: 'error',
        line_number_files_destination_directory: '',
        line_number_files_extension: 'line',
        fields: [],
        filters: []
      },

      temp: {
        name: '',
        files: {
          file: [{
            'name': '',
            'filemask': null,
            'exclude_filemask': null,
            'file_required': 'N',
            'include_subfolders': 'N',
            'id': '',
            'source_configuration_name': '' // hadoop的id
          }],
          type: 'CSV', // 文件类型
          compression: 'None' // 压缩
        },
        separator: ';', // 分隔符
        enclosure: '"', // 文本限定符
        enclosure_breaks: 'N', // 在文本限定符里允许换行?
        escapechar: '', // 逃逸字符
        header: 'Y', // 头部
        nr_headerlines: '1', // 头部行数量
        footer: 'N', // 尾部
        nr_footerlines: '1', // 尾部行数量
        line_wrapped: 'N', // 包装行
        nr_wraps: '1', // 以时间包装的行数
        layout_paged: 'N', // 分页布局
        nr_lines_per_page: '80', // 每页记录行数
        nr_lines_doc_header: '0', // 文档头部行
        noempty: 'Y', // 没有空行
        include: 'N', // 在输出包括字段名
        include_field: '',
        rownum: 'N',
        rownumByFile: 'N',
        rownum_field: '',
        format: 'DOS',
        encoding: '',
        limit: '0',
        date_format_lenient: 'Y',
        date_format_locale: 'zh_CN',
        add_to_result_filenames: 'Y',
        error_ignored: 'N',
        error_line_skipped: 'N',
        error_count_field: '',
        error_fields_field: '',
        error_text_field: '',
        bad_line_files_destination_directory: '',
        bad_line_files_extension: 'warning',
        error_line_files_destination_directory: '',
        error_line_files_extension: 'error',
        line_number_files_destination_directory: '',
        line_number_files_extension: 'line',
        fields: [],
        filters: []
      },
      tempHadoopFileInput: null,
      tabsValue: 'file',
      typeOptions: [
        { prop: 'CSV', label: 'CSV' },
        { prop: 'Fixed', label: 'Fixed' }
      ],
      formatOptions: [],
      encodingoptions: [],
      contentFormatOptions: [],
      compressionOptions: [],
      options: [],
      cloumns: [
        { prop: 'name', label: '名称', type: 'input' },
        { prop: 'type', label: '类型', type: 'select' },
        { prop: 'format', label: '格式', type: 'select' },
        { prop: 'position', label: '位置', type: 'input' },
        { prop: 'length', label: '长度', type: 'input' },
        { prop: 'precision', label: '精度', type: 'input' },
        { prop: 'currency', label: '货币类型', type: 'input' },
        { prop: 'decimal', label: '小数', type: 'input' },
        { prop: 'group', label: '分组', type: 'input' },
        { prop: 'nullif', label: 'Null if', type: 'input' },
        { prop: 'ifnull', label: '默认', type: 'input' },
        { prop: 'trim_type', label: '去除空字符串方式', type: 'select' },
        { prop: 'repeat', label: '重复', type: 'select' }
      ],
      filterColumns: [
        { prop: 'N', label: '否' },
        { prop: 'Y', label: '是' }
      ]
    };
  },
  computed: {
    domHeight: {
      get() { return this.$store.state.common.documentClientHeight; }
    }
  },
  watch: {
    'hadoopFileInput.fileNameInField': function(val, oldvlaue) {
      const flag = val === 'Y';
      this.fileNameInField = flag;
      this.fileNameField = !flag;
      this.setDateTimeFormatStatus();
    },
    'hadoopFileInput.file.SpecifyFormat': function(val, oldvlaue) {
      const flag = val === 'Y';
      this.SpecifyFormat = flag;
      this.setDateTimeFormatStatus();
    },
    'hadoopFileInput.file.servlet_output': function(val, oldvlaue) {
      const flag = val === 'Y';
      this.servlet_output = flag;
      this.fileNameInField = flag;
      this.setDateTimeFormatStatus();
    }
  },
  methods: {
    loadData(data) {
      if (data) {
        this.$forceUpdate();
        if (!data.files.file) {
          data.files.file = [
            {
              'name': '',
              'filemask': null,
              'exclude_filemask': null,
              'file_required': 'N',
              'include_subfolders': 'N',
              'id': '',
              'source_configuration_name': '' // hadoop的id
            }
          ];
        }
        this.hadoopFileInput = Object.assign({}, data);
        this.tempHadoopFileInput = Object.assign({}, data);
      }
    },
    // 保存表单数据
    handleSaveData() {
      this.$emit('savePluginData', this.hadoopFileInput);
    },
    cancel() {
      if (this.tempHadoopFileInput) {
        this.saveTempPluginData(this.tempHadoopFileInput);
      } else {
        const tempdata = JSON.parse(JSON.stringify(this.temp));
        tempdata['name'] = this.hadoopFileInput.name;
        this.saveTempPluginData(tempdata);
      }
      this.$emit('cancel');
    },
    setGraph(val) {
      this.graph = val;
    },
    // 重置表单数据
    resetFormData(stepname) {
      this.$forceUpdate();
      this.$refs['hadoopFileInput'].resetFields();
      this.hadoopFileInput = JSON.parse(JSON.stringify(this.temp));
      this.hadoopFileInput.name = stepname;
    },
    error_ignored_change(val) {
      val = val === 'Y';
      this.errorDisabled = !val;
    },
    Upload(param) {
      this.$set(this.hadoopFileInput, 'filename', param.file.name);
    },
    cleanFileList(val) {
      if (!val) {
        this.tempFiles = {};
        this.$refs.upload.clearFiles();
      }
    },
    setDateTimeFormatStatus() {
      let status = true;
      let status2 = false;
      if (!this.servlet_output && !this.fileNameInField && this.SpecifyFormat) {
        status = false;
      }
      if (
        this.servlet_output ||
          this.fileNameInField ||
          (!this.servlet_output && !this.fileNameInField && this.SpecifyFormat)
      ) {
        status2 = true;
      }

      this.data_time_format = status;
      this.data_time_format2 = status2;
    },
    getEncodings() {
      API.studio.encodings().then(res => {
        this.$set(this, 'encodingoptions', res.data);
      });
    },
    getCompression() {
      API.studio.compressionProviders().then(res => {
        this.$set(this, 'compressionOptions', res.data);
      });
    },
    getFormat() {
      API.studio.formats().then(res => {
        this.$set(this, 'contentFormatOptions', res.data);
      });
    },
    getvalueFormats() {
      API.studio.valueFormats({ valueMetaName: 'Date' }).then(res => {
        if (res.data) {
          this.formatOptions = res.data;
        } else {
          this.formatOptions = [];
        }
      });
    },
    setFileData(row) {
      this.hadoopFileInput.files.file = [];
      var file = {
        'name': row.filePath,
        'filemask': null,
        'exclude_filemask': null,
        'file_required': 'N',
        'include_subfolders': 'N',
        'id': row.id,
        'source_configuration_name': row.srcId // hadoop的id
      };
      this.hadoopFileInput.files.file.push(file);
      this.srcPopover = false;
    },
    setChildSuffix() {
      this.$refs.filepro.setSuffix('csv');
    },
    async getStreamFieldOptions() {
      const result = this.getStreamField();
      this.$refs['tableField'].setOptions(result);
    },
    async getStreamFilterOptions() {
      const result = this.getStreamField();
      this.$refs['filterField'].setOptions(result);
    },
    async getField() {
      const streamFields = await this.getStreamField();
      if (streamFields.data !== '') {
        this.$set(this.hadoopFileInput, 'fields', streamFields.data);
      }
    },
    async getStreamField() {
      const value = await this.getXml();
      if (this.hadoopFileInput.name) {
        return API.trans.hdfsInputFields(value, { stepName: this.hadoopFileInput.name });
      }
    },
    // async getInputField () {
    //   const value = await this.getXml();
    //   if (this.csvInput.name) {
    //     return API.trans.hdfsInputFields(value, {'stepName': this.csvInput.name});
    //   }
    // },
    getXml() {
      this.saveTempPluginData(this.hadoopFileInput);
      const graph = this.graph;
      const enc = new mxCodec(mxUtils.createXmlDocument());
      const node = enc.encode(graph.getModel());
      const value = mxUtils.getPrettyXml(node);
      return value;
    },
    saveTempPluginData(formData) {
      this.$emit('saveTempPluginData', formData);
    },
    // 字段添加行
    addObj() {
      this.hadoopFileInput.fields.push({});
      this.$nextTick(() => {
        const container = this.$el.querySelector('#fields > .el-table__body-wrapper');
        container.scrollTop = container.scrollHeight;
      });
    },
    // 字段删除行
    removeObj(index) {
      this.hadoopFileInput.fields.splice(index, 1);
    },
    // 过滤器添加行
    addFilter() {
      this.hadoopFileInput.filters.push({});
      this.$nextTick(() => {
        const container = this.$el.querySelector('#filters > .el-table__body-wrapper');
        container.scrollTop = container.scrollHeight;
      });
    },
    // 过滤器删除行
    removeFilter(index) {
      this.hadoopFileInput.filters.splice(index, 1);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .el-form-item {
    margin-bottom: 10px !important;
  }
  .divBut {
    text-align: center;
    margin-top: 54px !important;
    margin-bottom: 20px !important;
  }
  .button {
    width: 80px;
    height: 40px;
    display: inline-block;
    margin-left: 10px;
    margin-top: 5px;
  }
  .el-tabs >>> .el-tabs__content {
    padding: 15px !important;
  }
  .el-dialog__footer {
    margin-top: 10px;
  }
  .el-table-add-row {
    margin-top: 10px;
    width: 100%;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
  }
</style>
